<template>
  <div class="common-header">
    <div class="left-box">
      <slot name="headerLeft"></slot>
    </div>
    <div class="title" :class="{center:titleCenter}">{{title}}</div>
    <div class="right-box" :style="{width:rightWidth?'100%':''}">
      <slot name="headerRight"></slot>
    </div>
  </div>
</template>
<script>
  const config = window.Config
  export default {
    components: {},
    props: {
      title: {
        type: String,
        default: '自定义标题'
      },
      titleCenter: { //标题居中
        type: Boolean,
        default: false
      },
      styles: {
        type: Object,
        default: function() {
          return {}
        }
      },
      rightWidth: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        config
      }
    }
  }
</script>
<style lang="scss" scoped>
  .common-header {
    width: 98%;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    // background: #eaeaea;
    background: #fff;
    background-size: 100% 100%;
    position: relative;
    font-size: 16px;
    flex-shrink: 0;
    // border-left: 2px solid #15b3b3;
    .title {
      color: #000000;
      font-weight: bold;
      letter-spacing: 2px;
      position: absolute;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      left: 20px;
      max-width: 60%;
      top: 0;

      &.center {
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .left-box {
      float: left;
      display: flex;
      align-items: center;
      height: 100%;
    }

    .right-box {
      float: right;
      display: flex;
      height: 100%;
      align-items: center;
    }
  }
  .common-header::before {
    content: ""; /* 必须设置，即使是空内容 */
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 0;
    width: 4px; /* 竖线的宽度 */
    height: 16px;
    background-color: #15b3b3; /* 竖线的颜色 */
  }
</style>
